<template>
    <div class="info-root">
        <div class="content" v-if="curData">
            <div class="info box">
                <div class="info-content">
                    <div>
                        <span>Name:</span>
                        <span>{{ curData.name }}</span>
                    </div>
                    <div>
                        <span>NickName:</span>
                        <span>{{ curData.nickName ? curData.nickName : curData.name }}</span>
                    </div>
                    <div>
                        <span>Club:</span>
                        <span>{{ curData.club }}</span>
                    </div>
                    <div>
                        <span>IsCN:</span>
                        <span>{{ getCN(curData.isCN)[0] }}</span>
                    </div>
                    <div>
                        <span>IsCG:</span>
                        <span>{{ curData.isCG == 0 ? '无' : '有' }}</span>
                    </div>
                    <div>
                        <span>Bug:</span>
                        <span>{{ curData.bug ? curData.bug : '应该是没有' }}</span>
                    </div>
                </div>
            </div>
            <div class="tags box" ref="tagsDom" style="height: 0px;">
                <myTagContent :curData="curData.tags" @heightChange="tag_HChangeEvent" @change="tag_ChangeEvent">
                </myTagContent>
            </div>
            <div class="files box" ref="filesDom" style="height: 0px;">
                <myFileContent :curData="curData.files" @heightChange="file_HChangeEvent"></myFileContent>
            </div>
        </div>
    </div>
</template>

<script setup>
import { onMounted } from 'vue'
import { getGalInfo_API } from "@/axios/api/gal.js";
import { addTag_API } from "@/axios/api/tag.js";
import myTagContent from '@/components/info/tagList.vue';
import myFileContent from '@/components/info/fileList.vue';


const curData = ref(null);

onMounted(() => {
    const id = router.currentRoute.value.query.id;
    getGalData(id);
});

//#region tagEvent
const tagsDom = ref();
const tag_HChangeEvent = (h) => {
    tagsDom.value.setAttribute('style', `height:${h}px`);
}
const tag_ChangeEvent = (data) => {
    const { add, del, success, error } = data;
    addTag_API({
        id: curData.value.id,
        type: 0,
        tagAddIds: add.toString(),
        tagDelIds: del.toString(),
    }).then(res => {
        if (res.statusCode == 0)
            success(res.result);
        else
            error(res);
    }).catch(res => {
        error(res);
    })
}
const filesDom = ref();
const file_HChangeEvent = (h) => {
    filesDom.value.setAttribute('style', `height:${h}px`);
}
//#endregion

const getGalData = (id) => {
    getGalInfo_API({
        id: id,
    }).then(res => {
        if (res.statusCode == 0) {
            console.log(res.result);
            curData.value = res.result;
        }
    })
}

const getCN = (index) => {
    switch (index) {
        case 0:
            return ['未知', 'r'];
        case 3:
            return ['生肉', 'r'];
        case 1:
            return ['汉化', 'g'];
        case 2:
            return ['官中', 'g'];
        case 4:
            return ['AI', 'g'];
        case 5:
            return ['部分', 'y'];
        case 6:
            return ['机翻', 'y'];
    }
}

</script>

<style scoped lang="scss">
.info-root {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    background-image: url('$/images/00.jpg');
    background-position: center;
    background-size: cover;
    background-attachment: fixed;

    .content {
        width: 100%;
        max-width: 800px;
        margin: auto;
        height: auto;

        .box {
            border-radius: 7px;
            overflow: hidden;
            background-color: rgba(255, 255, 255, 0.5);
            position: relative;
            margin-top: 10px;
        }

        .box::before {
            content: '';
            display: block;
            width: 100%;
            height: 100%;
            background-image: url('$/images/00.jpg');
            background-position: center;
            background-size: cover;
            background-attachment: fixed;
            filter: blur(5px);
            position: absolute;
            top: 0;
            left: 0;
        }

        .info {
            height: 170px;

            .info-content {
                position: absolute;
                top: 0;
                padding-left: 20px;
                font-weight: 900;
                color: rgb(66, 66, 66);
                width: 100%;
                height: 100%;

                background: rgba(255, 255, 255, 0.6);

                >div {
                    padding: 3px 0;
                    display: flex;

                    >span:first-child {
                        width: 120px;
                        display: block;
                        text-align: right;
                        padding-right: 20px;
                    }
                }
            }
        }

        .tags,
        .files {
            transition-duration: 0.3s;

            >div {
                background: rgba(255, 255, 255, 0.6);
                width: 100%;
            }
        }
    }


}
</style>